<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
</body>
<script>
    //html5新特性：利用history的pushState等方法来解决使用ajax导致页面后退和前进的问题

    /**1.背景
     * 使用ajax，可以实现不需要刷新整个页面就可以进行局部页面的更新。这样可以开发交互性很强的富客户端程序，
     * 减少网络传输的内容。但长期以来存在一个问题，就是无法利用浏览器本身提供的前进和后退按钮进行操作。比如
     * 在页面执行某个动作，该动作利用ajax请求到服务器获取数据，更新了当前页面的某些内容，这时想回到操作前的
     * 界面，用户就会习惯点击浏览器的后退按钮，实际这里是无效的（要么页面没反应，要么打开一个前面打开的过的页
     * 面），或者想收藏当前页面(以便于重新打开时直接显示当前的信息)，也是无法做到的。这个问题因为html5的新特
     * 性而得以可以解决。但不是直接解决了。而是提供了一些新的api，需要程序员编写代码来实现。
     */

    /**2.history对象解析
     *   a.浏览器是通过 window 对象的 history 对象来对浏览器历史访问记录，从而可以实现前进和后退。history对象
     *     可以理解其保存了一个有序的列表对象，每个对象都代表了一个页面信息（包括页面的url等信息），注意当前页面
     *     也被保存在里面。这样就可以通过浏览器本身提供的前进和后退按钮来操作，也可以利用javascript调用history
     *     对象的back(),forward(),和go()方法来实现页面的切换。
     */

    /**3.history机制
     *   a.我们先来理解下history的机制。history对象中记录了浏览器窗口访问过的url，但出于安全考虑，无法通过程序
     *     获取history对象中的具体信息，只能通过back、forward、go方法进行页面跳转，此外length属性记录了history
     *     中的记录(url)条数。
     *   b.我们设想下，当在浏览器窗口打开第一个地址，比如 url1时， 这时history中就有了url1这个记录，且length属性值为1，
     *     history对象中有个当前页面指针（从概念上可以这么理解）指向url1；如果再打开一个url2页面（无论是通过在地址栏直接输入、
     *     或通过url1中的链接或js代码打开），这时history中就有了url1和url2这两个记录，是一个有序的列表，这时length属性值为2，
     *     history对象中的当前页面指针指向url2，这时url2是最新的页面，页面不可以前进，但可以后退到url1，这时如果点击浏览器本
     *     身提供的后退按钮（或用js调用back方法），这时url1页面会被重新加载显示，history对象的length仍然为2，url1和url2组
     *     成的列表仍然不变，但history对象中的当前页面指针指向url1了，这时就不能后退但可以前进了。可以理解成一个数据结构中的
     *     双向链表机制。
     *   c. 通过上面的描述我们可以看出，我们说的历史记录都是指一个完整的页面请求url，而ajax并不是一个完整的页面请求，因此浏览器
     *      无法记录ajax的操作信息。
     */

    /**4.history对象的新特性
     *   a.HTML5引入了history.pushState()和history.replaceState()这两个方法，它们会更新history对象的内容。同时，
     *     结合window.onpopstate事件，就可以解决文章开头提出的问题。
     *   b.
     *
     */
</script>
</html>